<!-- #layout name=blank -->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Urls</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <ul class="nav nav-tabs">
    <li
      v-for="item in tabs"
      :key="item.value"
      :class="{active:item.value==currentTab}"
    >
      <a href="javascript:;" @click="onTabClick(item.value)">{{
        item.displayName
      }}</a>
    </li>
  </ul>

  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a
        v-show="selectedRows.length"
        @click="onDelete"
        class="btn red navbar-btn"
        >{{
          Kooboo.text.common[
            currentTab == "internal" ? "deleteUsage" : "delete"
          ]
        }}</a
      >
    </div>
  </div>
  <kb-table
    :data="model.list"
    v-if="model.list"
    show-select
    :selected.sync="selectedRows"
  >
    <kb-table-column :label="Kooboo.text.common.name">
      <template v-slot="row">
        <span @click.stop="">
          <a
            data-inline-edit="true"
            :data-url="getUpdateUrl(row.id)"
            data-pk="0"
            >{{ row.name }}</a
          >
        </span>
      </template>
    </kb-table-column>

    <kb-table-column :label="Kooboo.text.site.URL.resourceType">
      <template v-slot="row">
        <span
          class="label label-sm blue"
          :href="row.fullUrl"
          @click.stop=""
          class="label"
          >{{ Kooboo.text.common[row.resourceType] || row.resourceType }}</span
        >
      </template>
    </kb-table-column>

    <kb-table-column
      :label="Kooboo.text.site.URL.hasObject"
      :if="currentTab=='internal'"
    >
      <template v-slot="row">
        <span
          class="label label-sm"
          :class="row.hasObject?'label-success':'label-default'"
          :href="row.fullUrl"
          >{{ Kooboo.text.common[row.hasObject ? "yes" : "no"] }}</span
        >
      </template>
    </kb-table-column>

    <kb-table-column :label="Kooboo.text.common.usedBy" width="230px">
      <template v-slot="row">
        <a
          class="label label-sm kb-table-label-refer"
          :style="{
                        background: Kooboo.getLabelColor(item.key.toLowerCase())
                      }"
          v-for="(item, index) in Kooboo.objToArr(row.relations)"
          :key="index"
          @click.stop="onShowRelationModal(item.key, row.id)"
        >
          {{
            item.value +
              " " +
              Kooboo.text.component.table[item.key.toLowerCase()]
          }}
        </a>
      </template>
    </kb-table-column>

    <kb-table-column :label="Kooboo.text.common.lastModified" width="130px">
      <template v-slot="row">
        <span>
          {{ new Date(row.lastModified).toDefaultLangString() }}
        </span>
      </template>
    </kb-table-column>

    <kb-table-column width="100px" align="right">
      <template v-slot="row">
        <a
          class="btn blue btn-ms"
          :href="row.previewUrl"
          @click.stop=""
          target="_blank"
          >{{ Kooboo.text.common.preview }}
        </a>
      </template>
    </kb-table-column>
  </kb-table>
  <kb-pager
    :page-nr="model.pageNr"
    :total-pages="model.totalPages"
    @change="onPageChange"
  ></kb-pager>
  <kb-relation-modal></kb-relation-modal>
</div>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/lib/x-editable/bootstrap-editable.min.js",
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbForm.js",
    "/_Admin/Scripts/components/kbTable.js",
    "/_Admin/Scripts/components/kbRelationModal.js",
    "/_Admin/Scripts/components/kbPager.js"
  ]);
  Kooboo.loadCSS([
    "/_Admin/Styles/bootstrap-editable/css/bootstrap-editable.css"
  ]);

  new Vue({
    el: "#app",
    data: function() {
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.site.URL.name
          }
        ],
        tabs: [
          {
            displayName: Kooboo.text.site.URL.internal,
            value: "internal"
          },
          {
            displayName: Kooboo.text.site.URL.external,
            value: "external"
          }
        ],
        currentTab: "internal",
        selectedRows: [],
        model: []
      };
    },
    mounted: function() {
      this.onTabClick(this.currentTab);
    },
    methods: {
      onDelete: function() {
        var me = this;
        if (confirm(Kooboo.text.confirm.deleteItems)) {
          var ids = this.selectedRows.map(function(m) {
            return m.id;
          });
          Kooboo.Url.Deletes({
            type: me.currentTab,
            ids: JSON.stringify(ids)
          }).then(function(res) {
            if (res.success) {
              window.info.show(Kooboo.text.info.delete.success, true);
              me.onTabClick(me.currentTab);
            } else {
              window.info.show(Kooboo.text.info.delete.fail, false);
            }
          });
        }
      },
      onTabClick: function(tab) {
        var me = this;
        Kooboo.Url["get" + _.capitalize(tab) + "List"]().then(function(res) {
          if (res.success) {
            me.currentTab = tab;
            me.model = {};
            me.$nextTick(function() {
              me.model = res.model;
            });
          }
        });
      },
      onShowRelationModal: function(by, id) {
        Kooboo.EventBus.publish("kb/relation/modal/show", {
          by: by,
          type: this.currentTab == "internal" ? "route" : "externalResource",
          id: id
        });
      },
      onPageChange: function(pageIndex) {
        var me = this;
        Kooboo.Url["get" + _.capitalize(this.currentTab) + "List"]({
          pageNr: pageIndex
        }).then(function(res) {
          if (res.success) {
            me.model = {};
            me.$nextTick(function() {
              me.model = res.model;
            });
          }
        });
      },
      getUpdateUrl: function(id) {
        return Kooboo.Route.Get(Kooboo.Url.updateUrl(), {
          type: this.currentTab,
          id: id
        });
      }
    },
    watch: {
      model: function() {
        var me = this;
        this.$nextTick(function() {
          $('[data-inline-edit="true"]').editable({
            mode: "inline",
            type: "text",
            validate: function(value) {
              if ($.trim(value) == "") {
                return Kooboo.text.validation.required;
              } else if (false) {
                return Kooboo.text.validation.urlInvalid;
              }
            },
            send: "always",
            success: function(res, newName) {
              if (res.success) {
                me.onTabClick(me.currentTab);
              } else {
                Kooboo.handleFailMessages(res.messages);
              }
            }
          });
        });
      }
    }
  });
</script>
